{% extends 'IcsocUIBundle::page.html.twig' %}
{% from 'IcsocUIBundle:Macro:actions.html.twig' import create %}
{% form_theme form _self %}
{% block number_widget -%}
    {# type="number" doesn't work with floats #}
    {%- set type = type|default('text') %}
    <div class="col-sm-2">
        <input type="{{ type }}" {{ block('widget_attributes') }} {% if value is not empty %}value="{{ value }}" {% endif %}/>
    </div>
{%- endblock number_widget %}
{% block stylesheet %}
    {{ parent() }}
    {% stylesheets
    '@gritter_css'
    filter='cssrewrite' filter='uglifycss'
    %}
    <link rel="stylesheet" href="{{ asset_url }}" />
    {% endstylesheets %}
{% endblock %}
{% block content %}
    <div class="page-content">
            {{ form_start(form, {'attr':{'id':'validation-form'}}) }}
            {{ form_row(form.trunk_num) }}
            {{ form_row(form.call_type) }}
            {{ form_row(form.black_type) }}
            {{ form_row(form.phone_num) }}
            <div class="form-group">
                <label  for="black_info_form_remark" class="col-sm-3 control-label no-padding-right"  >
                    备注
                </label>
                <div class="col-sm-9">
                    <textarea id="black_info_form_remark" name="black_info_form[remark]" class="col-xs-10 col-sm-3" ></textarea>
                </div>
            </div>
            {{ create(path('icsoc_namelist_black_index')) }}
            {{ form_end(form) }}
    </div>
{% endblock %}
{% block footer %}
    {% javascripts
    '@jqvalidate_js'
    '@autosize_js'
    '@common_js'
    filter='uglifyjs'
    %}
    <script src="{{ asset_url }}"></script>
    {% endjavascripts %}
    <script>
        $('#black_info_form_phone_num').autosize({append: "\n"});
        $('#validation-form').validate({
            errorElement: 'div',
            errorClass: 'help-block',
            focusInvalid: false,
            errorPlacement: function(error, element){
                if (element[0].id == 'black_info_form_phone_num') {
                    error.appendTo(element.parent());
                } else {
                    error.appendTo(element.parent().parent());
                }
                $(element.parent().parent()).attr('class','form-group has-error');
            },
            showErrors: function(errorMap, errorList) {
                this.defaultShowErrors();
                for (var i=0; i<errorList.length;i++) {
                    $(errorList[i].element).removeClass('help-block');
                    $(errorList[i].element).parent().parent().attr('class', 'form-group has-error');
                }
            },
            success: function(lable) {
                var id = $(lable).attr("for");
                if (id == 'black_info_form_phone_num') {
                    $(lable.parent().parent()).attr('class', 'form-group');
                } else {
                    $(lable.parent()).attr('class', 'form-group');
                }
            },
            rules: {
                'black_info_form[phone_num]': {
                    required: true,
                    isPhone: true,
                    isVague: true
                },
                'black_info_form[call_type]': {required:false},
                'black_info_form[black_type]': {required:false}

            },
            messages: {
                'black_info_form[phone_num]': {required:"{{ 'Black list number not empty'|trans  }}",
                    isPhone:"{{ 'Phone can only be for the digital'|trans }}", isVague:"{{ 'Length must be 11'|trans }}"}
            }
        });
        jQuery.validator.addMethod("isPhone", function(value, element) {
            var val = $("input[name='black_info_form[black_type]']:checked").val();
            if (val == 2) {
                return true;
            }
            var words = value.split('\n');
            var flag = true;
            var reg = /^\d+$/;
            for (var i = 0; i<words.length; i++) {
                var word = $.trim(words[i]);
                if (word.length >= 1) {
                    if (!reg.test(word)) {
                        flag = false;
                        break;
                    }
                }
            }
            return flag;
        }, "");
        jQuery.validator.addMethod("isVague", function(value, element) {
            var val = $("input[name='black_info_form[black_type]']:checked").val();
            if (val == 1) {
                return true;
            }
            var word = $.trim(value);
            return word.length == 11 ? true : false;
        }, "");

        function switchCallType()
        {
            var val = $("input[name='black_info_form[call_type]']:checked").val();
            if (val == 2) {
                $("#black_info_form_black_type_1").attr('disabled', true);
            } else {
                $("#black_info_form_black_type_1").attr('disabled', false);
            }
        }
        $(document).ready(function(){
            switchCallType();
        })
    </script>
{% endblock %}